<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="涛哥的博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="https://jaredtao.github.io">
    <!--SEO-->

<meta name="keywords" content="Qt,Qml,QtQuick,组件化编程" />


<meta name="description" content="
简介
发行说明
效果预览
Qt本身的国际化
存在翻译不全的问题
新的方案
关于批量翻译
总结

简介最近遇到一些需求，要在Qt/Qml中开发树结构，并能够导入、导出json格式。
于是我写了一..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    玩转Qml(17)-树组件的定制 |
    
    涛哥的博客
</title>

<link rel="alternate" href="/atom.xml" title="涛哥的博客" type="application/atom+xml">


<link rel="icon" href="/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">

    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

<script>
(function() {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

<meta name="generator" content="Hexo 4.2.1"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    http://snippet.shenliyang.com/img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='JaredTao'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <h2>
                单枪匹马亦对饮，历经磨难记初心
            </h2>
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://jaredtao.github.io">
                        涛哥的博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qt/"><i class="fa "></i>
                                玩转Qt</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qml/"><i class="fa "></i>
                                玩转Qml</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转QtQuick/"><i class="fa "></i>
                                玩转QtQuick</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/涛哥的博客/"><i class="fa "></i>
                                涛哥的博客</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="玩转Qml(17)-树组件的定制">
            
            玩转Qml(17)-树组件的定制
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/categories/%E7%8E%A9%E8%BD%ACQml/">玩转Qml</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/tags/Qml/" rel="tag">Qml</a> <a class="tag-link" href="/tags/Qt/" rel="tag">Qt</a> <a class="tag-link" href="/tags/QtQuick/" rel="tag">QtQuick</a> <a class="tag-link" href="/tags/%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" rel="tag">组件化编程</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2020/06/15</span>
    </span>
    
    <span class="fa-wrap">
        <i class="fa fa-eye"></i>
        <span id="busuanzi_value_page_pv"></span>
    </span>
    
    
</div>
        
        
    </div>
    
<div id="post-gallery">
    
    <img src="/images/Qml13/1.png" alt="gallery-img" class="gallery">
    
</div>

    <div class="post-body post-content">
        <ul>
<li><a href="#简介">简介</a></li>
<li><a href="#发行说明">发行说明</a></li>
<li><a href="#效果预览">效果预览</a></li>
<li><a href="#qt本身的国际化">Qt本身的国际化</a></li>
<li><a href="#存在翻译不全的问题">存在翻译不全的问题</a></li>
<li><a href="#新的方案">新的方案</a></li>
<li><a href="#关于批量翻译">关于批量翻译</a></li>
<li><a href="#总结">总结</a></li>
</ul>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>最近遇到一些需求，要在Qt/Qml中开发树结构，并能够导入、导出json格式。</p>
<p>于是我写了一个简易的Demo，并做了一些性能测试。</p>
<p>在这里将源码、实现原理、以及性能测试都记录、分享出来，算是抛砖引玉吧，希望有更多人来讨论、交流。</p>
<h2 id="TreeEdit源码"><a href="#TreeEdit源码" class="headerlink" title="TreeEdit源码"></a>TreeEdit源码</h2><p>起初的代码在单独的仓库</p>
<p>github <a href="https://github.com/jaredtao/TreeEdit" target="_blank" rel="noopener">https://github.com/jaredtao/TreeEdit</a></p>
<p>gitee镜像 <a href="https://gitee.com/jaredtao/Tree" target="_blank" rel="noopener">https://gitee.com/jaredtao/Tree</a></p>
<p>后续会收录到《玩转Qml》配套的开源项目TaoQuick中</p>
<p>github <a href="https://github.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://github.com/jaredtao/TaoQuick</a></p>
<p>gitee镜像 <a href="https://gitee.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://gitee.com/jaredtao/TaoQuick</a></p>
<h2 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h2><p>看一下最终效果</p>
<p><img src="/images/Qml13/1.png" alt="预览"></p>
<p>Qml实现的树结构编辑器, 功能包括:</p>
<p>树结构的缩进<br>节点展开、折叠<br>添加节点<br>删除节点<br>重命名节点<br>搜索<br>导入<br>导出<br>节点属性编辑（完善中）</p>
<h2 id="原理说明"><a href="#原理说明" class="headerlink" title="原理说明"></a>原理说明</h2><p>数据model的实现，使用C++，继承于QAbstractListModel，并实现rowCount、data等方法。</p>
<p>model本身是List结构的，在此基础上，对model数据进行扩展以模拟树结构，例如增加了 “节点深度”、“是否有子节点”等数据段。</p>
<p>view使用Qml Controls 2中的ListView模拟实现(Controls 1 中的TreeView即将被废弃)。</p>
<h2 id="关键代码"><a href="#关键代码" class="headerlink" title="关键代码"></a>关键代码</h2><h3 id="model"><a href="#model" class="headerlink" title="model"></a>model</h3><p>基本model的声明如下:</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">template</span> &lt;<span class="keyword">typename</span> T&gt;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TaoListModel</span> :</span> <span class="keyword">public</span> QAbstractListModel &#123;</span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    <span class="comment">//声明父类</span></span><br><span class="line">    <span class="keyword">using</span> Super = QAbstractListModel;</span><br><span class="line"></span><br><span class="line">    TaoListModel(QObject* parent = <span class="literal">nullptr</span>);</span><br><span class="line">    TaoListModel(<span class="keyword">const</span> QList&lt;T&gt;&amp; nodeList, QObject* parent = <span class="literal">nullptr</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> QList&lt;T&gt;&amp; nodeList() <span class="keyword">const</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">return</span> m_nodeList;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">setNodeList</span><span class="params">(<span class="keyword">const</span> QList&lt;T&gt;&amp; nodeList)</span></span>;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">int</span> <span class="title">rowCount</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; parent)</span> <span class="keyword">const</span> override</span>;</span><br><span class="line"></span><br><span class="line">    <span class="function">QVariant <span class="title">data</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index, <span class="keyword">int</span> role)</span> <span class="keyword">const</span> override</span>;</span><br><span class="line">    <span class="function"><span class="keyword">bool</span> <span class="title">setData</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index, <span class="keyword">const</span> QVariant&amp; value, <span class="keyword">int</span> role)</span> override</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">bool</span> <span class="title">insertRows</span><span class="params">(<span class="keyword">int</span> row, <span class="keyword">int</span> count, <span class="keyword">const</span> QModelIndex&amp; parent = QModelIndex())</span> override</span>;</span><br><span class="line">    <span class="function"><span class="keyword">bool</span> <span class="title">removeRows</span><span class="params">(<span class="keyword">int</span> row, <span class="keyword">int</span> count, <span class="keyword">const</span> QModelIndex&amp; parent = QModelIndex())</span> override</span>;</span><br><span class="line"></span><br><span class="line">    Qt::<span class="function">ItemFlags <span class="title">flags</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index)</span> <span class="keyword">const</span> override</span>;</span><br><span class="line">    Qt::<span class="function">DropActions <span class="title">supportedDropActions</span><span class="params">()</span> <span class="keyword">const</span> override</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">protected</span>:</span><br><span class="line">    QList&lt;T&gt; m_nodeList;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>其中数据成员使用 QList m_nodeList 存储, 大部分成员函数是对此数据的操作。</p>
<p>Json格式的model声明如下：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cDepthKey = QStringLiteral(<span class="string">"TModel_depth"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cExpendKey = QStringLiteral(<span class="string">"TModel_expend"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cChildrenExpendKey = QStringLiteral(<span class="string">"TModel_childrenExpend"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cHasChildendKey = QStringLiteral(<span class="string">"TModel_hasChildren"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cParentKey = QStringLiteral(<span class="string">"TModel_parent"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cChildrenKey = QStringLiteral(<span class="string">"TModel_children"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QString cRecursionKey = QStringLiteral(<span class="string">"subType"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="keyword">static</span> QStringList cFilterKeyList = &#123; cDepthKey, cExpendKey, cChildrenExpendKey, cHasChildendKey, cParentKey, cChildrenKey &#125;;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TaoJsonTreeModel</span> :</span> <span class="keyword">public</span> TaoListModel&lt;QJsonObject&gt; &#123;</span><br><span class="line">    Q_OBJECT</span><br><span class="line">    Q_PROPERTY(<span class="keyword">int</span> count READ count NOTIFY countChanged)</span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    <span class="comment">//声明父类</span></span><br><span class="line">    <span class="keyword">using</span> Super = TaoListModel&lt;QJsonObject&gt;;</span><br><span class="line">    <span class="comment">//从json文件读入数据</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">loadFromJson</span><span class="params">(<span class="keyword">const</span> QString&amp; jsonPath, <span class="keyword">const</span> QString&amp; recursionKey = cRecursionKey)</span></span>;</span><br><span class="line">    <span class="comment">//导出到json文件</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">bool</span> <span class="title">saveToJson</span><span class="params">(<span class="keyword">const</span> QString&amp; jsonPath, <span class="keyword">bool</span> compact = <span class="literal">false</span>)</span> <span class="keyword">const</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">clear</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//设置指定节点的数值</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">setNodeValue</span><span class="params">(<span class="keyword">int</span> index, <span class="keyword">const</span> QString &amp;key, <span class="keyword">const</span> QVariant &amp;value)</span></span>;</span><br><span class="line">    <span class="comment">//在index添加子节点。刷新父级，返回新项index</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">int</span> <span class="title">addNode</span><span class="params">(<span class="keyword">int</span> index, <span class="keyword">const</span> QJsonObject&amp; json)</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">int</span> <span class="title">addNode</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index, <span class="keyword">const</span> QJsonObject&amp; json)</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> addNode(index.row(), json);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//删除。递归删除所有子级,刷新父级</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">remove</span><span class="params">(<span class="keyword">int</span> index)</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">remove</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index)</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        remove(index.row());</span><br><span class="line">    &#125;</span><br><span class="line">    Q_INVOKABLE QList&lt;<span class="keyword">int</span>&gt; search(<span class="keyword">const</span> QString&amp; key, <span class="keyword">const</span> QString&amp; value, Qt::CaseSensitivity cs = Qt::CaseInsensitive) <span class="keyword">const</span>;</span><br><span class="line">    <span class="comment">//展开子级。只展开一级,不递归</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">expand</span><span class="params">(<span class="keyword">int</span> index)</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">expand</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index)</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        expand(index.row());</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//折叠子级。递归全部子级。</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">collapse</span><span class="params">(<span class="keyword">int</span> index)</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">collapse</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index)</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        collapse(index.row());</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//展开到指定项。递归</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">expandTo</span><span class="params">(<span class="keyword">int</span> index)</span></span>;</span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">expandTo</span><span class="params">(<span class="keyword">const</span> QModelIndex&amp; index)</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        expandTo(index.row());</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//展开全部</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">expandAll</span><span class="params">()</span></span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//折叠全部</span></span><br><span class="line">    <span class="function">Q_INVOKABLE <span class="keyword">void</span> <span class="title">collapseAll</span><span class="params">()</span></span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">int</span> <span class="title">count</span><span class="params">()</span> <span class="keyword">const</span></span>;</span><br><span class="line"></span><br><span class="line">    <span class="function">Q_INVOKABLE QVariant <span class="title">data</span><span class="params">(<span class="keyword">int</span> idx, <span class="keyword">int</span> role = Qt::DisplayRole)</span> <span class="keyword">const</span></span></span><br><span class="line"><span class="function">    </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> Super::data(Super::index(idx), role);</span><br><span class="line">    &#125;</span><br><span class="line">signals:</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">countChanged</span><span class="params">()</span></span>;</span><br><span class="line">    ...</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>TaoJsonTreeModel继承于TaoListModel，并提供大量Q_INVOKABLE函数，以供Qml调用。</p>
<h3 id="view"><a href="#view" class="headerlink" title="view"></a>view</h3><p>TreeView的模拟实现如下：</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> root</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __depthKey</span>: <span class="string">"TModel_depth"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __expendKey</span>: <span class="string">"TModel_expend"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __childrenExpendKey</span>: <span class="string">"TModel_childrenExpend"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __hasChildendKey</span>: <span class="string">"TModel_hasChildren"</span></span><br><span class="line"></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __parentKey</span>: <span class="string">"TModel_parent"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> string __childrenKey</span>: <span class="string">"TModel_children"</span></span><br><span class="line">    ...</span><br><span class="line">    <span class="title">ListView</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> listView</span></span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">currentIndex</span>: <span class="number">-1</span></span><br><span class="line">        <span class="attribute">delegate</span>: <span class="title">Rectangle</span> &#123;</span><br><span class="line">            <span class="attribute">id:</span><span class="string"> delegateRect</span></span><br><span class="line">            <span class="attribute">width</span>: listView.width</span><br><span class="line">            <span class="attribute">color</span>: (listView.currentIndex === index || area.hovered) ? <span class="attribute">config.normalColor</span> : config.darkerColor</span><br><span class="line">            <span class="comment">// 根据 expaned 判断是否展开，不展开的情况下高度为0</span></span><br><span class="line">            <span class="attribute">height</span>: model.display[__expendKey] === <span class="literal">true</span> ? <span class="number">35</span> : <span class="number">0</span></span><br><span class="line">            <span class="comment">// 优化。高度为0时visible为false，不渲染。</span></span><br><span class="line">            <span class="attribute">visible</span>: height &gt; <span class="number">0</span></span><br><span class="line">            <span class="keyword">property</span><span class="string"> alias editable</span>: nameEdit.editable</span><br><span class="line">            <span class="keyword">property</span><span class="string"> alias editItem</span>: nameEdit</span><br><span class="line">            <span class="title">TTextInput</span> &#123;</span><br><span class="line">                <span class="attribute">id:</span><span class="string"> nameEdit</span></span><br><span class="line">                <span class="attribute">anchors.verticalCenter</span>: <span class="built_in">parent</span>.verticalCenter</span><br><span class="line">                <span class="comment">//按深度缩进</span></span><br><span class="line">                <span class="attribute">x</span>: root.basePadding + model.display[__depthKey] * root.subPadding</span><br><span class="line">                <span class="attribute">text</span>: model.display[<span class="string">"name"</span>]</span><br><span class="line">                <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">                <span class="attribute">width</span>: <span class="built_in">parent</span>.width * <span class="number">0.8</span> - x</span><br><span class="line">                <span class="attribute">editable</span>: <span class="literal">false</span></span><br><span class="line">                <span class="attribute">onTEditFinished</span>: &#123;</span><br><span class="line">                    sourceModel.setNodeValue(index, <span class="string">"name"</span>, displayText)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="title">TTransArea</span> &#123;</span><br><span class="line">                <span class="attribute">id:</span><span class="string"> area</span></span><br><span class="line">                <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">                <span class="attribute">width</span>: <span class="built_in">parent</span>.width - controlIcon.x</span><br><span class="line">                <span class="attribute">hoverEnabled</span>: <span class="literal">true</span></span><br><span class="line">                <span class="attribute">acceptedButtons</span>: Qt.LeftButton | Qt.RightButton</span><br><span class="line">                <span class="attribute">onPressed</span>: &#123;</span><br><span class="line">                    <span class="comment">//单击时切换当前选中项</span></span><br><span class="line">                    <span class="keyword">if</span> (listView.currentIndex !== index) &#123;</span><br><span class="line">                        listView.currentIndex = index;</span><br><span class="line">                    &#125; <span class="title">else</span> &#123;</span><br><span class="line">                        listView.currentIndex = <span class="number">-1</span>;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="attribute">onTDoubleClicked</span>: &#123;</span><br><span class="line">                    <span class="comment">//双击进入编辑状态</span></span><br><span class="line">                    delegateRect.editable = <span class="literal">true</span>;</span><br><span class="line">                    nameEdit.forceActiveFocus()</span><br><span class="line">                    nameEdit.ensureVisible(<span class="number">0</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="title">Image</span> &#123;</span><br><span class="line">                <span class="attribute">id:</span><span class="string"> controlIcon</span></span><br><span class="line">                <span class="title">anchors</span> &#123;</span><br><span class="line">                    <span class="attribute">verticalCenter</span>: <span class="built_in">parent</span>.verticalCenter</span><br><span class="line">                    <span class="attribute">right</span>: <span class="built_in">parent</span>.right</span><br><span class="line">                    <span class="attribute">rightMargin</span>: <span class="number">20</span></span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">//有子节点时，显示小图标</span></span><br><span class="line">                <span class="attribute">visible</span>: model.display[__hasChildendKey]</span><br><span class="line">                <span class="attribute">source</span>: model.display[__childrenExpendKey] ? <span class="string">"qrc:/img/collapse.png"</span> : <span class="string">"qrc:/img/expand.png"</span></span><br><span class="line">                <span class="title">MouseArea</span> &#123;</span><br><span class="line">                    <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">                    <span class="attribute">onClicked</span>: &#123;</span><br><span class="line">                        <span class="comment">//点击小图标时，切换折叠、展开的状态</span></span><br><span class="line">                        <span class="keyword">if</span> (model.display[__hasChildendKey]) &#123;</span><br><span class="line">                            <span class="keyword">if</span>( <span class="literal">true</span> === model.display[__childrenExpendKey]) &#123;</span><br><span class="line">                                collapse(index)</span><br><span class="line">                            &#125; <span class="title">else</span> &#123;</span><br><span class="line">                                expand(index)</span><br><span class="line">                            &#125;</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>model层并没有扩展role，而是在data函数的role为display时直接返回json数据，</p>
<p>所以delegate中统一使用model.display[xxx]的方式访问数据。</p>
<h2 id="性能测试"><a href="#性能测试" class="headerlink" title="性能测试"></a>性能测试</h2><h3 id="测试环境"><a href="#测试环境" class="headerlink" title="测试环境"></a>测试环境</h3><p>CPU: Intel i5-8400 2.8GHz 六核</p>
<p>内存: 16GB</p>
<p>OS: Windows10 1909</p>
<p>Qt: 5.12.6</p>
<p>编译器: msvc 2017 x64</p>
<p>测试框架: QTest</p>
<h3 id="测试方法"><a href="#测试方法" class="headerlink" title="测试方法"></a>测试方法</h3><h4 id="数据生成"><a href="#数据生成" class="headerlink" title="数据生成"></a>数据生成</h4><p>使用node表示根节点的数量，depth表示每个根节点下面嵌套节点的层数。</p>
<p>例如： node 等于 100， depth 等于10，则数据如下：</p>
<p><img src="/images/Qml13/2.png" alt="预览"></p>
<p>顶层有100个节点，每个节点下面再嵌套10层，共计节点 100 + 100 * 10 = 1100.</p>
<p>生成json数据的代码如下：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="comment">//单元测试类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">LoadTest</span> :</span> <span class="keyword">public</span> QObject &#123;</span><br><span class="line">    Q_OBJECT</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    LoadTest();</span><br><span class="line">    ~LoadTest();</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">static</span> <span class="keyword">void</span> <span class="title">genJson</span><span class="params">(<span class="keyword">const</span> QPoint&amp; point)</span></span>;</span><br><span class="line"></span><br><span class="line">    ...</span><br><span class="line"><span class="comment">//私有槽函数会被QTest调用</span></span><br><span class="line"><span class="keyword">private</span> slots:</span><br><span class="line">    <span class="comment">//初始化</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">initTestCase</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//清理</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">cleanupTestCase</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//测试导入</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">test_load</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//测试导入前，准备数据</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">test_load_data</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//测试导出</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">test_save</span><span class="params">()</span></span>;</span><br><span class="line">    <span class="comment">//测试导出前，准备数据</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">test_save_data</span><span class="params">()</span></span>;</span><br><span class="line">&#125;;</span><br><span class="line">...</span><br><span class="line"><span class="comment">//节点最大值</span></span><br><span class="line"><span class="keyword">const</span> <span class="keyword">int</span> nodeMax = <span class="number">10000</span>;</span><br><span class="line"><span class="comment">//嵌套深度最大值</span></span><br><span class="line"><span class="keyword">const</span> <span class="keyword">int</span> depthMax = <span class="number">100</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> LoadTest::genJson(<span class="keyword">const</span> QPoint&amp; point)</span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">using</span> <span class="keyword">namespace</span> TaoCommon;</span><br><span class="line">    <span class="keyword">int</span> node = point.x();</span><br><span class="line">    <span class="keyword">int</span> depth = point.y();</span><br><span class="line">    QJsonArray arr;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i &lt; node; ++i) &#123;</span><br><span class="line">        QJsonObject obj;</span><br><span class="line">        obj[<span class="string">"name"</span>] = QString(<span class="string">"node_%1"</span>).arg(i);</span><br><span class="line">        QVector&lt;QJsonArray&gt; childrenArr = &#123; depth, QJsonArray &#123; QJsonObject &#123;&#125; &#125; &#125;;</span><br><span class="line">        <span class="comment">//最后一个节点，嵌套层级最深的。</span></span><br><span class="line">        childrenArr[depth - <span class="number">1</span>][<span class="number">0</span>] = QJsonObject &#123; &#123; <span class="string">"name"</span>, QString(<span class="string">"node_%1_%2"</span>).arg(i).arg(depth - <span class="number">1</span>) &#125; &#125;;</span><br><span class="line">        <span class="comment">//从后往前倒推。</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">int</span> j = depth - <span class="number">2</span>; j &gt;= <span class="number">0</span>; --j) &#123;</span><br><span class="line">            childrenArr[j][<span class="number">0</span>] = QJsonObject &#123; &#123; cRecursionKey, childrenArr[j + <span class="number">1</span>] &#125;, &#123; <span class="string">"name"</span>, QString(<span class="string">"node_%1_%2"</span>).arg(i).arg(j) &#125; &#125;;</span><br><span class="line">        &#125;</span><br><span class="line">        obj[cRecursionKey] = childrenArr[<span class="number">0</span>];</span><br><span class="line">        arr.append(obj);</span><br><span class="line">    &#125;</span><br><span class="line">    writeJsonFile(qApp-&gt;applicationDirPath() + QString(<span class="string">"/%1_%2.json"</span>).arg(node).arg(depth), arr);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> LoadTest::initTestCase()</span><br><span class="line">&#123;</span><br><span class="line">    QList&lt;QPoint&gt; <span class="built_in">list</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">1</span>; i &lt;= nodeMax; i *= <span class="number">10</span>) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">int</span> j = <span class="number">1</span>; j &lt;= depthMax; j *= <span class="number">10</span>) &#123;</span><br><span class="line">            <span class="built_in">list</span>.append(&#123; i, j &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">auto</span> result = QtConcurrent::<span class="built_in">map</span>(<span class="built_in">list</span>, &amp;LoadTest::genJson);</span><br><span class="line">    result.waitForFinished();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>初始化函数initTestCase中，组织了一个QList，然后使用QtConcurrent::map并发调用genJson函数，生成数据json文件。</p>
<p>node和depth每次扩大10倍。</p>
<p>经过测试，嵌套层数在100以上时，Qt可能会崩溃。要么是QJsonDocument无法解析，要么是Qml挂掉。所以不使用100以上的嵌套级别。</p>
<h3 id="测试过程"><a href="#测试过程" class="headerlink" title="测试过程"></a>测试过程</h3><p>QTest十分好用，简单易上手，参考帮助文件即可</p>
<p>例如测试加载的代码如下:</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> LoadTest::prepareData()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//添加两列数据</span></span><br><span class="line">    QTest::addColumn&lt;<span class="keyword">int</span>&gt;(<span class="string">"node"</span>);</span><br><span class="line">    QTest::addColumn&lt;<span class="keyword">int</span>&gt;(<span class="string">"depth"</span>);</span><br><span class="line">    <span class="comment">//添加行</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">1</span>; i &lt;= nodeMax; i *= <span class="number">10</span>) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">int</span> j = <span class="number">1</span>; j &lt;= depthMax; j *= <span class="number">10</span>) &#123;</span><br><span class="line">            QTest::newRow(QString(<span class="string">"%1_%2"</span>).arg(i).arg(j).toStdString().c_str()) &lt;&lt; i &lt;&lt; j;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">void</span> LoadTest::test_load_data()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//准备数据</span></span><br><span class="line">    prepareData();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">void</span> LoadTest::test_load()</span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">using</span> <span class="keyword">namespace</span> TaoCommon;</span><br><span class="line">    <span class="comment">//取数据</span></span><br><span class="line">    QFETCH(<span class="keyword">int</span>, node);</span><br><span class="line">    QFETCH(<span class="keyword">int</span>, depth);</span><br><span class="line">    TaoJsonTreeModel model;</span><br><span class="line">    <span class="comment">//性能测试</span></span><br><span class="line">    QBENCHMARK</span><br><span class="line">    &#123;</span><br><span class="line">        model.loadFromJson(qApp-&gt;applicationDirPath() + QString(<span class="string">"/%1_%2.json"</span>).arg(node).arg(depth));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="测试结果"><a href="#测试结果" class="headerlink" title="测试结果"></a>测试结果</h3><p><img src="/images/Qml13/3.png" alt="预览"></p>
<p>一秒内最多可以加载的数据量在十万级别，包括</p>
<p>10000 x 10耗时在 386毫秒，1000 x 100 耗时在671毫秒。</p>

    </div>
    
    <div class="reward" ontouchstart>
    <div class="reward-wrap">赏
        <div class="reward-box">
            
            <span class="reward-type">
                <img class="alipay" src="/img/zhifubao.jpg"><b>支付宝打赏</b>
            </span>
            
            
            <span class="reward-type">
                <img class="wechat" src="/img/weixin.jpg"><b>微信打赏</b>
            </span>
            
        </div>
    </div>
    <p class="reward-tip">
        为众人抱薪者,不可使其冻毙于霜雪
    </p>
</div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            文章采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可, 转载请注明出处 © <a href="https://jaredtao.github.io" target="_blank">武威的涛哥</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/2020/11/10/%E7%8E%A9%E8%BD%ACQml(18)-%E7%94%A8%E6%88%B7%E5%90%91%E5%AF%BC/" class="pre-post btn btn-default" title='玩转Qml(18)-用户向导'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            玩转Qml(18)-用户向导</span>
    </a>
    
    
    <a href="/2020/03/12/%E7%8E%A9%E8%BD%ACQt(15)-Web%E6%93%8D%E6%8E%A7%E5%B0%8F%E8%BD%A6%E6%A1%88%E4%BE%8B/" class="next-post btn btn-default" title='玩转Qt(15)-操控Web小车案例'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            玩转Qt(15)-操控Web小车案例</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    

<div id="vcomments" class="valine"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

<script>
new Valine({
    av: AV,
    el: '#vcomments',
    appId: 'qegD4552u6FU9HoNDvRsonko-gzGzoHsz',
    appKey: 'eitB2FV5n2qyMHcDM7x6EQpt',
    placeholder: '说点什么吧',
    notify: false,
    verify: true,
    avatar: 'mm',
    meta: 'nick,mail'.split(','),
    pageSize: '10',
    path: window.location.pathname,
    lang: 'zh-CN'.toLowerCase()
})
</script>


</div>


                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TreeEdit源码"><span class="toc-text">TreeEdit源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#效果预览"><span class="toc-text">效果预览</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#原理说明"><span class="toc-text">原理说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关键代码"><span class="toc-text">关键代码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#model"><span class="toc-text">model</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#view"><span class="toc-text">view</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#性能测试"><span class="toc-text">性能测试</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#测试环境"><span class="toc-text">测试环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#测试方法"><span class="toc-text">测试方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#数据生成"><span class="toc-text">数据生成</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#测试过程"><span class="toc-text">测试过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#测试结果"><span class="toc-text">测试结果</span></a></li></ol></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
    访问量:
    <strong id="busuanzi_value_site_pv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    &nbsp; | &nbsp;
    访客数:
    <strong id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2019
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/assets/tagcanvas.min.js?rev=2.9.js"></script>

<script>
var tagOption = {
    textColour: '#444', // 字体颜色
    outlineMethod: 'block', // 选中模式
    outlineColour: '#FFDAB9', // 选中模式的颜色
    interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
    textHeight: 13,
    outlineRadius: 3,
    freezeActive: true || '', // 选中的标签是否继续滚动
    frontSelect: true || '', // 不选标签云后部的标签
    initial: [0.1, -0.1],
    depth: 0.5,
    decel: 0.95,
    maxSpeed: 0.03,
    reverse: true || '', // 是否反向触发
    fadeIn: 500, // 进入动画时间
    wheelZoom: false || '' // 是否启用鼠标滚轮
}
TagCanvas.Start('tag-cloud-3d', '', tagOption);
</script>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>